<template>
	<view :style="{'--color':color,'--colors':colors}" class="p-top20">
		
		<view class="row bgwhite">
			<view class="row padding20 j-sb bot">
				<text class="size26">精选留言</text>
				<view class="d-flex a-center  eidtMessag" v-if="ismessage" @click="Openreply">
					<view class="iconfont icon-pinglun size26 m-right10"></view>
					<text>写留言</text>
				</view>
			</view>
			
			<block v-for="(item,index) in pageInfo" :key="index">
			<view class="row padding30 bot">
				<view class="headImg bor_radius flexac">
					<image :src="item.fq_headimg" mode="aspectFill" class="head_Img bor_radius"></image>
				</view>
				<view class="flex-1 d-flex f-column m-left20" @click.stop="replyOne(item)">
					<text class="color_33 size28 bold">{{item.fq_name}}</text>
					<text class="color_99 h6 m-top6">{{item.addtime}}</text>
					<view class="rows color_66 h6 m-top10">{{item.review_content}}</view>
					<!-- 回复 -->
					<view class="comlist bgF5 padding10 m-top16" 
					      v-if="item.reply" 
						  v-for="(subItem,subIndex) in item.reply" 
						  :key="subIndex" >
						<view class="rows" @click.stop="replyOne(subItem)">
							<text class="color_66 h6" v-if="item.fqvid == subItem.fqvid">{{subItem.fq_name}}：</text>
							<view class="d-inline-block m-right10" v-else>
								<text class="color_66 h6">{{subItem.fq_name}}</text>
								<text class="color h6 m-left10 m-right10">回复</text>
								<text class="color_66 h6">{{subItem.bfq_name}}：</text>
							</view>
							<text class="color_B3 h6">{{subItem.review_content}}</text>
						</view>
						<view class="color_99 h6 m-top10">{{subItem.addtime}}</view>
					</view>
					
				</view>
			</view>
		</block>
			
			
			
		</view>
		
		
		
		<view class="maskings d-flex a-end" v-if="reply">
			<view class="row bgwhite p-top40 p-left30 p-right30 p-bot60">
				<view class="row a-center j-sb">
					<text class="color_16 size30 bold" v-if="review_id">回复 {{replyname}}</text>
					<text class="color_16 size30 bold" v-else>写留言</text>
					<view class="iconfont icon-guanbi1 color_16 size30 bold" @click.stop="reply = false"></view>
				</view>
				<textarea class="textarea m-top30 size26 color_16" 
				          v-model="commont"  :maxlength="-1" 
						  placeholder="请在此输入文字~"></textarea>
				
				<view class="row subBtn  flexac white size36 bold m-top30" 
				@click="confirmBtn">确定</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		name:'message',
		props:['ismessage','pageData','chapter_id','goods_id'],
		data() {
			return {
				imgUrl:this.imgUrl,
				commont:'',
				replyname:'',
				pageInfo:'',
				reply:false,
				review_id:0,
				fqvid:0
			}
		},
		methods: {
			Openreply(){
				console.log('1');
				this.reply = true;
			},
			replyOne(item){
				this.review_id = item.review_id;
				this.fqvid = item.fqvid;
				this.replyname = item.fq_name;
				this.reply = true;
			},
			
			confirmBtn() {
				if (!this.commont) return this.$Toast('内容不能为空!');
				this.$http.post({
					url: '/communityApi/commentFileId',
					data: {
						review_content: this.commont,
						chapter_id: this.chapterId,
						by_review_id: this.review_id,
						by_fqvid: this.fqvid,
					}
				}).then(res => {
					if (!res.success) return this.$Toast(res.msg);
					this.commont = '';
					this.reply = false;
					this.$Toast(res.msg);
					this.myClassDetail();
				})
			},
			
			myClassDetail(){
				this.$http.get({
					url:'/goodsLessonsApi/myClassDetail',
					data:{
						goods_id:this.goods_id,
						chapter_id:this.chapterId
					}
				}).then(res=>{
					if(res.code != 200) return this.$Toast(res.msg);
					this.pageInfo = res.data.reply;
				})
			},
		},
		computed:{
			...mapState(['color','colors','chapterId']),
		},
		watch:{
			pageData:{
				deep:true,
				immediate:true,
				handler(newVal){
					if(!newVal) return;
					this.pageInfo = newVal;
				}
			}
		
		}
	}
</script>

<style lang="scss" scoped>
	.headImg{
		width:80rpx;
		height: 80rpx;
		background-color: var(--color);
	}
	.head_Img{
		width:74rpx;
		height: 74rpx;
	}
	.textarea{
		width:100%;
		height: 300rpx;
		padding: 30rpx 20rpx;
		background: #F2F2F2;
		border-radius: 20rpx;
	}
	.subBtn{
		height: 98rpx;
		border-radius: 48rpx;
		background-color: var(--color);
	}
	.eidtMessag{
		color:var(--color);
	}
</style>
